<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="uploadArticle" @keypress="killDefault($event)">
            <fieldset class="form-group">
              <input
                type="text"
                class="form-control form-control-lg"
                placeholder="Article Title"
                v-model="article.title"
                :disabled="uploading"
                required
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="What's this article about?"
                v-model="article.description"
                :disabled="uploading"
                required
              />
            </fieldset>
            <fieldset class="form-group">
              <textarea
                class="form-control"
                rows="8"
                placeholder="Write your article (in markdown)"
                v-model="article.body"
                :disabled="uploading"
                required
              ></textarea>
            </fieldset>
            <fieldset class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="Enter tags"
                v-model="tagInput"
                :disabled="uploading"
                @keypress="addTag($event)"
              />
              <div class="tag-list">
                <span class="tag-default tag-pill" v-for="(tag, i) in article.tagList" :key="i">
                  <i class="ion-close-round" @click="delTag(i)"></i>
                  {{tag}}
                </span>
              </div>
            </fieldset>
            <button class="btn btn-lg pull-xs-right btn-primary">Publish Article</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createArticle, getArticle, editArticle } from "@/api/article";

export default {
  // 在路由匹配组件渲染之前会先执行中间件
  middleware: ["authenticated"],
  name: "create",
  data() {
    return {
      article: {
        title: "",
        description: "",
        body: "",
        tagList: []
      },
      uploading: false,
      tagInput: ""
    };
  },
  async created() {
    const slug = this.$route.params.slug;
    if (slug) {
      const { data } = await getArticle(slug);
      this.article.title = data.article.title;
      this.article.body = data.article.body;
      this.article.description = data.article.description;
      this.article.tagList = data.article.tagList;
    }
  },
  methods: {
    addTag(e) {
      if (e.keyCode === 13) {
        if (!this.article.tagList.includes(this.tagInput)) {
          this.article.tagList.push(this.tagInput);
        }
        this.tagInput = "";
      }
    },
    delTag(i) {
      this.article.tagList.splice(i, 1);
    },
    async uploadArticle() {
      const slug = this.$route.params.slug;
      this.uploading = true;
      const { data } = slug
        ? await editArticle({ article: this.article }, slug)
        : await createArticle({
            article: this.article
          });
      this.$router.push(`/article/${data.article.slug}`);
    },
    // 阻止表单回车触发 submit 且保留多行文本的回车换行
    killDefault(e) {
      if (e.keyCode === 13 && e.target.type !== "textarea") {
        e.preventDefault();
      }
    }
  }
};
</script>